<template>
  <div class="order">
    <div class="top">
      <font>订单</font>
    </div>
    <div v-show="!ordershow" v-for="item,index in this.$store.state.shoplist" class="user_order">
      <div class="container">
        <el-row style="font-size: 12px;">
          <el-col :span="5">
            <font v-show="item.OK">订单已完成</font>
            <font v-show="!item.OK">订单已取消</font>
            <font v-show="item.OK=='ing'">订单进行中</font>
          </el-col>
          <el-col :span="16" style="color:darkgrey;">
            <font>{{gettime(item.Date)}}</font>
          </el-col>
          <el-col :span="3">
            <el-button type="danger"@click="delorder(item._id,index)"  icon="el-icon-delete" circle></el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <div class="img">
              <img :src="'http://127.0.0.1:3000/'+item.shangjiaImage" alt="">
            </div>
          </el-col>
          <el-col :span="21" style="font-size: 11px;border-bottom: 1px solid gainsboro;margin-bottom: 7px;padding-bottom: 7px;">
              <h3>{{item.ShopName}}</h3>
          </el-col>
        </el-row>
        <el-row style='color: gray;font-size:12px;' v-for="goods,index in item.ShopType">
          <el-col :span="3">
            <div style="width: 100%;height: 10px"></div>
          </el-col>
          <el-col :span="20">
            <font>
              {{goods.goods}}
            </font>
          </el-col>
          <el-col :span="1">
            x{{goods.num}}
          </el-col>
        </el-row>
        <div style="height:25px;">
          <font style="font-size: 12px;float: right;">共 {{num(item.ShopType)}} 份,实付 <h3 style="display: inline;">￥{{item.Money}}</h3></font>
        </div>
      </div>
    </div>
    <div v-show="ordershow" style="height: 85%;">
      <img src="../../public/noorder.jpg" alt="" style="width: 100%;height:100%;">
    </div>
  </div>
</template>

<script>
export default {
  name: 'order',
  data(){
    return{
      ordershow:this.$store.state.shoplist.length==0?true:false
    }
  },
  methods:{
    num(e){
      var a=0;
      e.forEach(function(value){a+=value.num})
      return a
    },
    gettime:function timestampToTime(timestamp) {
      return new Date(parseInt(timestamp)).toLocaleString().replace(/:\d{1,2}$/,' ');
    },
    delorder(id,index){
      this.axios.post('http://127.0.0.1:3000/DelDingdan',{id:id})
      .then((res)=>{
          if(res.data.msg==200){
            this.$store.state.shoplist.splice(index,1)
            console.log('删除成功')
          }else{
            alert('删除失败')
          }
      })
      .catch((err)=>{
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
  .order{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(238,238,238);
    overflow: auto;
  }
  .top{
    background: rgb(52,146,233);
    padding: 18px;
    color: white;
    text-align: center;
    font-size: 18px;
  }
  .container{
    width: 90%;
    margin: auto;
  }
  .user_order{
    background: white;
    margin: 0 0 10px 0;
    padding-top: 15px;
  }
  .img{
    width: 34px;
    height: 34px;
  }
  .el-row{
    margin: 0 0 8px 0;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
</style>